<template>
<div v-show="disPlayFlag">
    <div>
        <el-card class="box-card">
            <div>
                <div class="filter-container">
                    <el-row :gutter="10">
                        <el-col :span="11">
                            <el-form label-width="150px" label-position='right' size="small">
                                <el-form-item label="岗位名称" prop="ouinfoIdOzOrgOuinfoName">
                                    <el-input v-model="listQuery.condition.groupIdOzOrgGroupName.value"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="9" :offset="3">
                            <el-button size="small" class="filter-item" type="primary" @click="getList">查 询</el-button>
                            <el-button  size="small" class="filter-item" type="primary" @click="handleCreate">添 加</el-button>
                            <el-button size="small" class="filter-item" type="primary" @click="handleDelete">删 除</el-button>
                            <el-button size="small" class="filter-item" type="primary" @click="handleReset">重 置</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-card>
        <el-card class="box-card">
            <div>
                <el-table ref="multipleTable" :key='tableKey' :data="list"
                size="small"
                 v-loading="listLoading" element-loading-text="给我一点时间" 
                 border fit highlight-current-row style="width: 100%;border:#eeeeee">
                    <el-table-column type="selection" width="35">
                    </el-table-column>
                    <el-table-column align="center" label="岗位名称" min-width="200px" prop="groupIdOzOrgGroupName">
                        <template slot-scope="scope">
                                <span>{{scope.row.groupIdOzOrgGroupName}}</span>
                            </template>
                    </el-table-column>
                    <el-table-column align="center" label="所属组织" min-width="160px" prop="groupIdOzOrgGroupOuinfoIdOzOrgOuinfoName">
                        <template slot-scope="scope">
                                <span>{{scope.row.groupIdOzOrgGroupOuinfoIdOzOrgOuinfoName}}</span>
                            </template>
                    </el-table-column>
                    <el-table-column align="center" label="所属单位" min-width="200px" prop="groupIdOzOrgGroupOuinfoIdOzOrgOuinfoParentIdOzOrgOuinfoName">
                        <template slot-scope="scope">
                                <span>{{scope.row.groupIdOzOrgGroupOuinfoIdOzOrgOuinfoParentIdOzOrgOuinfoName}}</span>
                            </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </el-card>
        <group-select :displayFlag="groupSelectDisplayFlag" @closeMe="closeGroupSelect"></group-select>
    </div>
</div>
</template>

<script>
import {
  insertItem,
  compositeSelect,
  countSelect,
  batchDeleteItem
} from '@/api/systemManage/tabPaneContainJob'
import {
  yesOrNoOptions,
  yesOrNoKeyValue
} from '@/utils/allOptions'
import groupSelect from '@/components/common/groupSelect'

export default {
  components: {
    groupSelect
  },
  directives: {},
  props: {
    disPlayFlag: {
      type: Boolean,
      default: false
    },
    targetUserId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // -------Options-----------
      yesOrNoOptions,
      // -------Options-----------
      // table list
      tableKey: 0,
      list: null,
      listQuery: {
        rowBounds: {
          offset: 1,
          limit: 20
        },
        condition: {
          userinfoId: {
            'property': 'userinfoId',
            'value': '',
            'type': 'EQ'
          },
          groupIdOzOrgGroupName: {
            'property': 'groupIdOzOrgGroupName',
            'value': '',
            'type': 'LIKE'
          }
        },
        fields: [
          'userinfoId',
          'groupId',
          'groupIdOzOrgGroupName',
          'groupIdOzOrgGroupOuinfoIdOzOrgOuinfoName',
          'groupIdOzOrgGroupOuinfoIdOzOrgOuinfoParentIdOzOrgOuinfoName'
        ],
        sort: [{
          direction: 'ASC',
          property: 'groupId'
        }]
      },
      total: null,
      listLoading: false,
      // table list
      groupSelectDisplayFlag: false
    }
  },
  // 画面刚进入method
  mounted() {
    if (this.disPlayFlag) {
      this.getList()
    }
  },
  filters: {
    yesOrNoFilter(target) {
      return yesOrNoKeyValue[target]
    }
  },
  watch: {
    disPlayFlag: {
      handler: function(val, oldVal) {
        if (this.disPlayFlag) {
          this.getList()
        } else {
          this.handleReset()
        }
      },
      immediate: true
    }
  },
  methods: {
    handleCreate() {
      this.groupSelectDisplayFlag = true
    },
    closeGroupSelect(groupId) {
      if (groupId) {
        const query = {
          condition: {
            userinfoId: {
              property: 'userinfoId',
              value: this.targetUserId,
              type: 'EQ'
            },
            groupId: {
              property: 'groupId',
              value: groupId,
              type: 'EQ'
            }
          }
        }
        countSelect(query).then(response => {
          if (response.data.data === 0) {
            const data = {
              'userinfoId': this.targetUserId,
              'groupId': groupId
            }
            insertItem(data).then(() => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.groupSelectDisplayFlag = false
              this.getList()
            })
          } else {
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
            this.groupSelectDisplayFlag = false
            this.getList()
          }
        })
      } else {
        this.groupSelectDisplayFlag = false
        this.getList()
      }
    },
    // 检索条件框回车键按下后，跳转到首页
    handleFilter() {
      this.listQuerypage = 1
      this.getList()
    },
    // 翻页器使用
    handleSizeChange(val) {
      this.listQuerypage = 1
      this.listQuery.rowBounds.limit = val
      this.getList()
    },
    // 翻页器使用
    handleCurrentChange(val) {
      this.listQuerypage = val
      this.listQuery.rowBounds.offset =
                this.listQuery.rowBounds.limit * (val - 1) + 1
      this.getList()
    },
    handleDelete() {
      const selectArr = this.$refs.multipleTable.selection
      if (selectArr && selectArr.length === 0) {
        return
      }
      this.$confirm(
        '此操作将删除岗位信息, 是否继续?',
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          const condition = []
          for (const temp of selectArr) {
            condition.push({
              'userinfoId': temp.userinfoId,
              'groupId': temp.groupId
            })
          }
          batchDeleteItem(condition).then(response => {
            this.$message({
              message: '删除成功。',
              type: 'success'
            })
            this.getList()
          })
        })
        .catch(error => {
          console.error(error)
        })
    },
    getList() {
      this.listLoading = true
      const that = this
      compositeSelect(this.listQuery).then(response => {
        const records = response.data.data.records
        const editlist = new Array(0)
        if (response.data.data.count > 0) {
          for (const item of records) {
            const input = {}
            for (const elem of that.listQuery.fields.values()) {
              input[elem] = item[elem]
            }
            editlist.push(input)
          }
        }
        this.list = editlist
        this.total = response.data.data.count
        this.listLoading = false
      })
    },
    handleReset() {
      this.listQuery.condition.groupIdOzOrgGroupName.value = ''
      this.getList()
    }
  }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.box-card {
    width: 100%;
}

.el-button--mini,
.el-button--mini.is-round {
    padding: 3px 5px;
}
</style>
